<template>
  <div id="view-class-info-formation" class="manual-entry-container">
    <div>
      <ul>
        <li>
          <span class="active">课程名称</span>
          <span>{{ courseName }}</span>
          <span class="active">培养层次</span>
          <span>{{ eduLevelName }} </span>
        </li>
        <li>
          <span class="active">教学班名</span>
          <span>{{ teachingClassName }}</span>
          <span class="active">修习类型<span>*</span></span>
          <span>{{ subjectType }} </span>
        </li>
        <li>
          <span class="active">学时<span>*</span></span>
          <span>{{ totalHours }}</span>
          <span class="active">理论学时<span>*</span></span>
          <span>{{ teachingHours }} </span>
        </li>
        <li>
          <span class="active">实践学时<span>*</span></span>
          <span>{{ practiceHours }}</span>
          <span class="active">学分<span>*</span></span>
          <span>{{ credit }} </span>
        </li>
        <li>
          <span class="active">教学课主讲<span>*</span></span>
          <span><span
              style="color: #004ca7"
              v-for="item in jxkZhujiang"
              :key="item.id"
              >{{ item.xm }}&nbsp;&nbsp;</span
            ></span>
          <span class="active">教学班助教</span>
          <span> <span
              style="color: #004ca7"
              v-for="item in  jxkZhujiao"
              :key="item.id"
              >{{ item.xm }}&nbsp;&nbsp;</span
            ></span>
        </li>
        <li>
          <span class="active">考核方式<span>*</span></span>
          <span>{{ khfs }}</span>
          <span class="active">分制<span>*</span></span>
          <span>{{ pointsSystem }} </span>
        </li>
        <li>
          <span class="active">课下作业成绩所占比例</span>
          <span>{{ homeworkRatio }}</span>
          <span class="active">课堂测试成绩所占比例</span>
          <span>{{ hskeRatio }} </span>
        </li>
        <li>
          <span class="active">期中考试成绩所占比例</span>
          <span>{{ midExamRatio }}</span>
          <span class="active">期末考试成绩所占比例</span>
          <span>{{ finalExamRetio }} </span>
        </li>
         <li>
          <span class="active">授课方式<span>*</span></span>
          <span>{{ teachingMethod }}</span>
          <span class="active">教学场地场所类型</span>
          <span>{{ jxcslx }} </span>
        </li>
         <li>
          <span class="active">课程负责人<span>*</span></span>
          <span>{{ kcfzr }}</span>
          <span class="active">教学场地场所</span>
          <span> <span
              style="color: #004ca7"
              v-for="item in jxcdcsList"
              :key="item.id"
              >{{ item.cdmc }}&nbsp;&nbsp;</span
            ></span>
        </li>
        <li>
          <span class="active">排课要求</span>
          <span style="width: 750px;"
            > {{arrangeReq}}</span>
        </li>
      </ul>
    </div>
    <div class="btn-caozuo">
      <el-button
        @click="cancelView"
        size="mini"
        type="warning"
        plain
      >取消</el-button>
    </div>
  </div>
</template>

<script>
import ButtonItem from "@/components/ButtonItem.vue";
import {jxbgl_query_teaching_class_detail} from "@/api/trainingManagement/place.js";
export default {
  components: {
    ButtonItem,
  },
  name: "workOutClass",
  data() {
    return {
      selectRomePlaceDialog: false, //选择教学场地弹窗
      dialogTitle: "教学课主讲", //弹窗标题
      queryKey: "", //搜索关键字
      defaultProps: {
        children: "children",
        label: "name",
      },
      data: [], //部门树列表
      speakerTableData: [], //讲师表格数据
      showSpeakerDialog: false,
      khfs: "",
      khfsList: [], //考核方式
      jxcslx: "",
      jxcslxList: [], //教学场所类型
      kcfzr: "",
      kcfzrList: [], //课程负责人
      jxcdcsList: [], //教学舱底场所

      id: "",
      courseName: "", //课程名称
      eduLevel: "", //培养层次
      eduLevelName: '',
      teachingClassName: "", //教学班名
      subjectType: "", //修习类型
      totalHours: "", //学时
      teachingHours: "", //理论学时
      practiceHours: "", //实践学时
      credit: "", //学分
      pointsSystem: "", //分制
      homeworkRatio: "", // 课下作业成绩所占比例
      hskeRatio: "", //课堂测试成绩所占比例
      midExamRatio: "", //期中考试成绩所占比例
      finalExamRetio: "", //课终考核成绩所占比例
      teachingMethod: "", //授课方式
      arrangeReq: "", //排课要求

      pointsSystemList: [{ label: "全部", value: "全部" }], //分制列表
      teachingMethodList: [{ label: "全部", value: "全部" }], //授课方式
      classSelectList: [], //选中的教师
      jxkZhujiang: [], //教学课主讲
      jxkZhujiao: [], //教学课助教
      selectTreeNode: {}, //点击树节点
      info_type: "", //类型

      kcid: "",
      xueqi: "",
      nj: "",
      kcbh: "",
      courseno: "",
      staffRoom: "",
    };
  },
  mounted() {

    this.id = this.$route.query.id;
    this.queryEditInfo();
  },
  methods: {
    cancelView() {
      this.$router.push("/admin/teachingTaskManage/checkteachingtask/index");
    },
    async queryEditInfo() {
      const res = await jxbgl_query_teaching_class_detail(this.id);
      if (res.data.code == 200) {
        this.courseName = res.data.data.info.courseName;
        this.eduLevel = res.data.data.info.eduLevel;
        this.eduLevelName = res.data.data.info.eduLevelName;
        this.teachingClassName = res.data.data.info.teachingClassName;
        this.subjectType = res.data.data.info.subjectType;
        this.totalHours = res.data.data.extend.totalHours;
        this.teachingHours = res.data.data.extend.teachingHours;
        this.practiceHours = res.data.data.extend.practiceHours;
        this.credit = res.data.data.extend.credit;
        this.teachingMethod = res.data.data.info.steachingMethod;
        this.kcfzr = res.data.data.info.courseCharger;
        this.khfs = res.data.data.extend.khfs; //考核方式
        this.jxcslx = res.data.data.placeType; // 教学场所类型  ===========
        this.pointsSystem = res.data.data.info.pointsSystem; //分制
        this.homeworkRatio = res.data.data.info.homeworkRatio; // 课下作业成绩所占比例
        this.hskeRatio = res.data.data.info.hskeRatio; // 课堂测试成绩所占比例
        this.midExamRatio = res.data.data.info.midExamRatio; //期中考试成绩所占比例
        this.finalExamRetio = res.data.data.info.finalExamRetio; //课终考核成绩所占比例
        this.arrangeReq = res.data.data.info.arrangeReq; //排课要求
        this.jxcslx = res.data.data.info.placeType; //场地场所类型
        this.place = res.data.data.info.place; //场地
        var teachtask = res.data.data.extend.teachtask.split(",");
        var zhujiangArr = [];
        if (teachtask.length > 0) {
          teachtask.forEach((item) => {
            var a = item.split("/");
            zhujiangArr.push({ id: a[0], xm: a[1] });
          });
          this.jxkZhujiang = zhujiangArr;
        }

        var assistantemployeeids =
          res.data.data.extend.assistantemployeeids.split(",");
        var zhujiaoArr = [];
        if (assistantemployeeids.length > 0) {
          assistantemployeeids.forEach((item) => {
            var a = item.split("/");
            zhujiaoArr.push({ id: a[0], xm: a[1] });
          });
          this.jxkZhujiao = zhujiaoArr;
        }
      }
    },
  },
};
</script>

<style scoped lang="less">
.manual-entry-container {
  > div:nth-child(1) {
    width: calc(100% - 20px);
    border: 1px solid rgba(0, 76, 167, 0.8);
    border-radius: 6px;
    margin: 70px auto 0;
    ul {
      list-style: none;
      li {
        border-bottom: 1px solid rgba(0, 76, 167, 0.4);
        height: auto;
        > span {
          text-align: left;
          padding-left: 100px;
          box-sizing: border-box;
          display: inline-block;
          font-size: 14px;
          color: rgba(0, 76, 167, 1);
          padding-left: 54px;
          border-right: 1px solid rgba(0, 76, 167, 0.4);
          height: 60px;
          padding-top: 20px;
          vertical-align: middle;
          &:nth-child(n) {
            width: 357px;
          }
          &:last-child {
            border-right: none;
          }
          &.active {
            font-size: 16px;
            color: rgba(0, 76, 167, 1);
            font-weight: bold;
            background: rgba(77, 129, 192, 0.1);
            text-align: center;
            padding-left: 0;
          }
          > span {
            color: red;
          }
        }
      }
      &:nth-child(1) {
        li {
          > span {
            text-align: left;
            &.active {
              text-align: left;
              padding-left: 100px;
            }
          }
        }
      }
    }
    > div {
      padding: 14px 83px;
      height: 78px;
      > div:nth-child(1) {
        font-size: 16px;
        font-weight: bold;
        color: #004ca7;
        margin-bottom: 10px;
      }
      > div:nth-child(2) {
        > span {
          font-size: 14px;
          color: rgba(0, 76, 167, 1);
          margin-right: 57px;
          > span {
            color: rgba(255, 56, 25, 1);
          }
        }
      }
    }
  }
  .button-group {
    text-align: center;
    margin-top: 36px;
    > div {
      display: inline-block;
      padding: 6px 20px;
      background: rgba(255, 246, 239, 1);
      border: 1px solid rgba(243, 184, 21, 1);
      border-radius: 4px;
      font-size: 18px;
      font-weight: 400;
      color: rgba(243, 184, 21, 1);
      text-align: center;
    }
  }
  .edit-icon {
    font-size: 20px;
    color: #02c86c;
    margin-left: 10px;
    cursor: pointer;
  }

  /deep/ .el-input--small .el-input__inner {
    height: 28px;
  }
}

.btn-caozuo {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 800px;
  margin: 0 auto;
  padding-top: 50px;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.body-manual-container {
  > div:nth-child(1) {
    width: 800px;
    // height: 785px;
    border: 1px solid rgba(0, 76, 167, 0.8);
    border-radius: 6px;
    margin: 70px auto 0;
    ul {
      list-style: none;
      li {
        border-bottom: 1px solid rgba(0, 76, 167, 0.4);
        height: auto;
        > span {
          box-sizing: border-box;
          display: inline-block;
          font-size: 14px;
          color: rgba(0, 76, 167, 1);
          padding-left: 54px;
          border-right: 1px solid rgba(0, 76, 167, 0.4);
          height: 60px;
          padding-top: 20px;
          vertical-align: middle;
          &:nth-child(n) {
            width: 357px;
          }
          // &:nth-child(2n) {
          // 	width: 444px;
          // }
          &:last-child {
            border-right: none;
          }
          &.active {
            font-size: 16px;
            color: rgba(0, 76, 167, 1);
            font-weight: bold;
            background: rgba(77, 129, 192, 0.1);
            text-align: center;
            padding-left: 0;
          }
          > span {
            color: rgba(255, 56, 25, 1);
          }
        }
      }
    }
  }
}

.btn-caozuo {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 800px;
  margin: 0 auto;
  padding-top: 50px;
}
</style>

<style lang="less" scoped>
  #view-class-info-formation{
    /deep/ .el-button--warning.is-plain{
      background: #FFF6EF;
      border-color: #F3B815;
      color: #F3B815;
      border-radius: 6px;
    }
    /deep/ .el-button--warning.is-plain:focus, .el-button--warning.is-plain:hover{
      color: #F3B815;
      background: #FFF6EF;
      border: 1px solid #F3B815;
      border-radius: 6px;
    }

    /deep/ .el-button--success.is-plain{
      background: #F1FFF8;
      border-color: #02C86C;
      color: #02C86C;
      border-radius: 6px;
    }
    /deep/ .el-button--success.is-plain:hover{
      background: #F1FFF8;
      border: 1px solid #02C86C;
      color: #02C86C;
      border-radius: 6px;
    }

    /deep/ .el-button--primary.is-plain{
      background: #F1F8FE;
      border-color: #51AEF6;
      color: #51AEF6;
      border-radius: 6px;
    }

    /deep/ .el-button--primary.is-plain:hover{
      background: #F1F8FE;
      border: 1px solid #51AEF6;
      color: #51AEF6;
      border-radius: 6px;
    }

    /deep/ .el-button--danger.is-plain{
      background: #FFEFEF;
      border-color: #FF3819;
      color: #FF3819;
      border-radius: 6px;
    }

    /deep/ .el-button--danger.is-plain:hover{
      background: #FFEFEF;
      border: 1px solid #FF3819;
      color: #FF3819;
      border-radius: 6px;
    }
  }
  </style>
